<template>
  <view class="background">
    <view style="height:32%; display: flex;align-items: center;justify-content: center;padding-left: 100rpx;padding-right: 100rpx;line-height: 1.5;">
      <view style="font-size: 22px;">
        您好!鉴于您是第一次登陆，请修改密码!
      </view>
    </view>
    <view class="login-box">
      <view style="margin-left: 80rpx;">新密码</view>
      <view><input class="login-input" v-model="loginForm.password" placeholder=""/></view>
    </view>


    <view style="justify-content: center;">
      <button class="login-button" @click="changePassword()">></button>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import util from '@/api/util/index.js'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async changePassword() {
      try {
        const res = await util.changePassword(this.loginForm)
        if (res.code == 200) {
          uni.showModal({
            content: res.data,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            success: (res) => {
              if (store.getters.getUserInfo.identity == 0) {
                uni.navigateTo({
                  url: '/pages/stuIndex/stuIndex',
                });
              }
              else if (store.getters.getUserInfo.identity == 1) {
                uni.switchTab({
                  url: '/pages/index/index',
                });
              }
              else {
                uni.navigateTo({
                  url: '/pages/adminIndex/adminIndex',
                });
              }
            }
          });
        }
        else {
          uni.showToast({
            title: res.data,
            icon: 'none', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
        }
      } catch (e) {
        console.log(e)
      }
    }
  },
  onLoad () {
    this.loginForm.username = store.getters.getUserInfo.username
  }
}
</script>


<style>
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: linear-gradient(to bottom, #DCE3F8, #FFFFFF); /* 从淡蓝色到灰色的渐变 */
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;

  /* 	  align-items: center;
      justify-content: center; */
}
.login-box {
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  margin: 0 1vh 4vh 1vh;
  width:100%;
  /* height:20%; */
}
.login-input {
  margin: 2vh 4vh 2vh 3vh;
  border-radius: 50px;
  background-color: #FFFFFF;
  height: 70rpx;
  /* width: 80%; */
  padding: 20rpx;
}
.login-button {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 0;
  background-color: #4C68E4;
  color: white;
  font-size: 22px;
  display: flex;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
}
</style>